import WMap from '../map/index.js'
import * as turf from '@turf/turf'
const locationIMG =
	''

const points1 = turf.randomPoint(1000, { bbox: [96, 31, 100, 40] })
const points2 = turf.randomPoint(10000, { bbox: [103, 36, 103.05, 36.06] })

const map = new WMap.Map('map', {
	center: [105.04434162820588, 35.0690079506098],
	zoom: 5,
	minZoom: 3,
	maxZoom: 18
})
console.time('marker clusterer')
const markers = points1.features.map((feature, i) => {
	const marker = new WMap.Marker({
		position: feature.geometry.coordinates,
		icon: locationIMG,
		offset: [-16, -16],
		label: `${i}`,
		extData: {
			name: `${i}`
		}
	})
	marker.on('click', e => {
		console.log(e.target.olTarget)
		console.log(e.target.getExtentData())
	})
	return marker
})

const contentMarkers = points2.features.map((feature, i) => {
	const marker = new WMap.Marker({
		fontColor: '#fff',
		borderColor: '#0000005e', // 边框颜色
		labelBgColor: '#0000005e', // 背景颜色
		offset: [-35, -80],
		labelYOffset: -90,
		labelXOffset: 0,
		padding: [5, 3, 5, 5],
		position: feature.geometry.coordinates,
		// offset: [-16, -16],
		label: `${i}`
	})
	marker.on('click', e => {
		map.setTop(e.target)
	})
	return marker
})

let newArr = []
for (let index = 0; index < 8; index++) {
	const m = new WMap.Marker({
		icon: 'https://webapi.amap.com/images/car.png',
		position: new WMap.LngLat(103.048243 + 0.0001 * (index + 1), 36.059426),
		angle: index * 30,
		label: `${index}`,
		map
	})

	newArr.push(m)
}

// 实例化聚合对象
const markerCluster = new WMap.MarkerCluster(map, markers.concat(contentMarkers), {
	noClusterZoom: 18, // 在zoom及以上不聚合
	distance: 40, // 要素将聚集在一起的距离（以像素为单位）
	minDistance: 30, //  簇之间的最小距离（以像素为单位）
	showViewExtent: true, // 只展示可视区域 Marker
	zoomOnClick: true, // 是否点击展开 Cluster
	averageCenter: false // 聚合点的图标位置是否是所有聚合内点的中心点。默认为否
})

// markerCluster.add(newArr)

newArr.forEach(m => {
	m.on('click', e => {
		map.setTop(m)
		console.log(markerCluster.getClusterSource().singleFeatureIds)
	})
})

const zoomOnClickDom = document.getElementById('zoomOnClick')
zoomOnClickDom.onclick = function () {
	markerCluster.setZoomOnClick(true)
}

console.timeEnd('marker clusterer')

markerCluster &&
	markerCluster.on('click', w => {
		console.log(w)
	})

map.on('click', w => {
	console.log(w.lngLat)
})

// 进入车辆跟踪
const enterTrack = document.getElementById('enterTrack')
enterTrack.onclick = () => {
	markerCluster.clearMarkers()
	let marker = new WMap.Marker({
		position: new WMap.LngLat(105.04434162820588, 35.0690079506098),
		icon: locationIMG,
		label: `处于跟踪的覆盖物`
	})
	map.setCenter(new WMap.LngLat(105.04434162820588, 35.0690079506098))
	markerCluster.add(marker)
}
// 退出车辆跟踪
const exitTrack = document.getElementById('exitTrack')
exitTrack.onclick = () => {
	markerCluster.clearMarkers()
	markerCluster.setMarkers(markers.concat(contentMarkers))
}
